import React from 'react';
import { Form, Input, InputNumber, Button, message } from 'antd';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import styles from './AddShopping.module.css';

interface ShopFormValues {
  name: string;
  ingredients: string;
  price: number;
  effect: string;
  image?: string;
}

const AddShopping: React.FC = () => {
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const [loading, setLoading] = React.useState(false);

  const onFinish = async (values: ShopFormValues) => {
    setLoading(true);
    try {
      const res = await axios.post('/api/shoplist', values);
      if (res.data.code === 200) {
        message.success('商品添加成功！');
        navigate('/index/shopping-list');
      } else {
        message.error('添加失败，请重试');
      }
    } catch {
      message.error('添加失败，请重试');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className={styles.container}>
      <div className={styles.card}>
        <Form
          form={form}
          layout="vertical"
          onFinish={onFinish}
          className={styles.form}
        >
          <Form.Item
            label="商品名称"
            name="name"
            rules={[{ required: true, message: '请输入商品名称' }]}
          >
            <Input placeholder="请输入商品名称" />
          </Form.Item>
          <Form.Item
            label="原料成分"
            name="ingredients"
            rules={[{ required: true, message: '请输入原料成分' }]}
          >
            <Input.TextArea rows={3} placeholder="请输入原料成分" />
          </Form.Item>
          <Form.Item
            label="价格"
            name="price"
            rules={[{ required: true, message: '请输入价格' }]}
          >
            <InputNumber min={0} max={999} step={0.01} style={{ width: '100%' }} placeholder="请输入价格" />
          </Form.Item>
          <Form.Item
            label="功效"
            name="effect"
            rules={[{ required: true, message: '请输入功效' }]}
          >
            <Input.TextArea rows={4} placeholder="请输入功效" />
          </Form.Item>
          {/* <Form.Item
            label="图片URL"
            name="image"
          >
            <Input placeholder="请输入图片URL（可选）" />
          </Form.Item> */}
          <Form.Item>
            <Button type="primary" htmlType="submit" loading={loading} block>
              添加商品
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default AddShopping;